<template>
  
  
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :show-close="false" :title="isAdd ? '新增' : '开启砍价'" width="1000px">
    <el-form ref="form"  :model="form"  :rules="rules" size="small" label-width="140px">
          <el-form-item label="id" v-if="form.id!=null && form.id!=''">
            <el-input v-model="form.id" :disabled="true" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="默认奖品图片">
    
              <MaterialList
                      v-model="imageArr"
                      style="width: 915px;"
                      type="image"
                      :num="1"
                      :width="150"
                      :height="150"
              />
          </el-form-item>
          <el-form-item label="活动名称">
            <el-input v-model="form.title" style="width: 800px;" />
          </el-form-item>
          <el-form-item label="活动介绍">
            <el-input :rows="3" v-model="form.prizeMsg" type="textarea" style="width: 800px;" />
          </el-form-item>
          <el-form-item label="活动规则">
            <el-input :rows="3" v-model="form.prizeRule" type="textarea" style="width: 800px;" />
          </el-form-item>



          <el-form-item label="活动开始时间" >
            <template>
              <el-date-picker
                v-model="form.startTime"
                type="datetime"
                placeholder="开始时间" style="width: 380px;"
              />
            </template>
            
          </el-form-item>

           <el-form-item label="活动结束时间" >
          
            <template>
              <el-date-picker
                v-model="form.endTime"
                type="datetime"
                placeholder="结束时间" style="width: 380px;"
              />
            </template>
          </el-form-item>
       
   
          <!--
            <el-form-item label="状态:0=到期,1=进行中">
              <el-input :rows="3" v-model="form.status" type="textarea" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="活动状态:0=启用,1=禁用">
                <el-input :rows="3" v-model="form.isLook" type="textarea" style="width: 370px;" />
            </el-form-item>
          -->
          
          <el-form-item label="每日抽奖次数">
            <el-input-number  v-model="form.number" style="width: 380px;" />
          </el-form-item>
          <el-form-item label="抽奖消耗积分">
            <el-input-number v-model="form.integral" style="width: 380px;" />
          </el-form-item>


          <el-form-item label="奖品配置">

            <template>
              <el-table
                :data="form.tableData"
                style="width: 100%"
                border
                >
                
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form label-position="right" inline class="demo-table-expand" label-width="150px">
                      <el-form-item label="奖品类型">
                        <div v-if="props.row.type==0">积分</div>
                        <div v-if="props.row.type==1">商品</div>
                      </el-form-item>
                      <el-form-item label="奖励积分"  v-if="props.row.type==0">
                        <span>{{ props.row.integral }}</span>
                      </el-form-item>
                      <el-form-item label="奖励商品"  v-if="props.row.type==1">
                        <span>{{ props.row.product_name }}</span>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  label="奖品名称"
                  prop="title">
                </el-table-column>
                <el-table-column
                  label="奖品数量"
                  prop="number">
                </el-table-column>
                <el-table-column
                  label="中奖概率"
                  prop="weight">
                </el-table-column>

                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button type="text" size="small"  @click="makePrize(scope.row)">设置奖品</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>

          </el-form-item>
      
        </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>






          <el-dialog title="设置奖品" :visible.sync="dialogFormVisible" :show-close="false"  :append-to-body="true">
            <el-form :model="setform"   label-width="120px">
              <el-form-item label="奖品名称">
                <el-input v-model="setform.title" style="width: 370px;" />
              </el-form-item>
              <el-form-item label="奖品类型">
                  <el-radio v-model="setform.type" :label="1">商品</el-radio>
                  <el-radio v-model="setform.type" :label="0" style="width: 200px;">积分</el-radio>
      
              </el-form-item>
              <el-form-item label="奖励积分" v-if="setform.type==0">
                <el-input-number v-model="setform.integral" style="width: 370px;" />
              </el-form-item>


              <el-form-item label="奖励商品" v-if="setform.type==1">
                  <cgood v-model="form1.good" :disabled="true" @click="is_refresh=!is_refresh"></cgood>
              </el-form-item>




            <!--
            
            <el-form-item label="奖励商品" v-if="setform.type==1 &&  setform.image==''">
                  <cgood v-model="form1.good" :disabled="true" @click="is_refresh=!is_refresh"></cgood>
              </el-form-item>



              <el-form-item label="奖励商品" v-if="setform.type==1 &&  setform.image!=''">

                  <div v-if="is_look">
                    <img :src="setform.image"   :width="150"
                        :height="150" 
                        >
                    <el-button type="primary" plain @click="is_look=false" round>更换商品</el-button>
                  </div>
                  <div v-if="!is_look">
                    <cgood v-model="form1.good" :disabled="true" @click="is_refresh=!is_refresh"></cgood>
                  </div>
              </el-form-item>
            -->
              


              <el-form-item label="商品名称" v-if="setform.type==1 ">
                  <el-input v-model="form1.good.storeName" style="width: 370px;" />
              </el-form-item>
              <el-form-item label="奖品数量">
                <el-input-number v-model="setform.number" :min="1"   style="width: 370px;" />
              </el-form-item>
              <el-form-item label="中奖概率">
                <el-input-number v-model="setform.weight" :min="0.01" :max="1"  style="width: 370px;" />
              </el-form-item>
            </el-form>
      
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false" >取 消</el-button>
              <el-button type="primary"   @click="makePrizeSure()">确 定</el-button>
            </div>
          </el-dialog>

  </el-dialog>

     







</template>

<script>
import cgood from '@/views/components/good'
import { add, edit } from '@/api/yxSystemPrize'
import editor from '../../components/Editor'
import MaterialList from '@/components/material'
import singlePic from '@/components/singlematerial'
import { getInfo } from '@/api/yxStoreProduct'
export default {
  components: { editor, MaterialList,cgood,singlePic },
  props: {
    isAdd: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      is_refresh:true,
      is_look:true,
      imageArr:[],
      loading: false, dialog: false,
      templateList: [],
      form1: {
        good:{
          productType:null,
          productId: null,
          storeName: null,
          image: null
        }
      },
      form: {
        id:'',
        image:'',
        title:'',
        prize_msg:'',
        prize_rule:'',
        start_time:'',
        end_time:'',
        number:3,
        integral:10,
        tableData:[
          {
              id:1,
              title: '奖品1',
              type: 0,
              integral: 10,
              product_id: 0,
              product_name: '',
              image:'',
              number: 0,
              weight: 0.01
          }, 
          {
            id:2,
            title: '奖品2',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          }, 
          {
            id:3,
            title: '奖品3',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          }, 
          {
            id:4,
            title: '奖品4',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          },
          {
            id:5,
            title: '奖品5',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          },
          {
            id:6,
            title: '奖品6',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          },
          {
            id:7,
            title: '奖品7',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          },
          {
            id:8,
            title: '奖品8',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          },
          {
            id:9,
            title: '奖品9',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          }
        ]
      },
      dialogFormVisible: false,
      setform:{},
     
      rules: {
      }
    }
  },
  watch: {
    
  },
 
  methods: {
    cancelPrize(){
      this.dialogFormVisible = false;
      this.form1.good={};
    },
    cancel() {
      this.resetForm();
      this.form1.good={};
    },
    doSubmit() {
      this.loading = true
      if (this.isAdd) {
        console.log("执行新增")
        this.doAdd()
      } else{
        console.log("执行修改")
        this.doEdit()
      } 
    },
    doAdd() {
      this.form.image = this.imageArr[0]
      add(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    doEdit() {
      var attrs = this.form.attrs;
      var newAttrs = [];

      for (var i = 0; i < attrs.length; i++) {  
          attrs[i].bargain_price = parseFloat(attrs[i].bargain_price)
          attrs[i].bargain_ok_price = parseFloat(attrs[i].bargain_ok_price)
          newAttrs.push(attrs[i]);
      }
      this.form.attrs = newAttrs;
      this.form.image = this.imageArr
      edit(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.imageArr=[]
      this.form = {
        id:'',
        image:'',
        title:'',
        prize_msg:'',
        prize_rule:'',
        start_time:'',
        end_time:'',
        number:3,
        integral:10,
        tableData:[
            {
              id:1,
              title: '奖品1',
              type: 0,
              integral: 10,
              product_id: 0,
              product_name: '',
              image:'',
              number: 0,
              weight: 0.01
          }, 
          {
            id:2,
            title: '奖品2',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          }, 
          {
            id:3,
            title: '奖品3',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          }, 
          {
            id:4,
            title: '奖品4',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          },
          {
            id:5,
            title: '奖品5',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          },
          {
            id:6,
            title: '奖品6',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          },
          {
            id:7,
            title: '奖品7',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          },
          {
            id:8,
            title: '奖品8',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          },
          {
            id:9,
            title: '奖品9',
            type: 0,
            integral: 10,
            product_id: 0,
            product_name: '',
            image:'',
            number: 0,
            weight: 0.01
          }
        ]
      }
    },
    makePrize(data){
        this.dialogFormVisible = true;
        this.setform = data
        if(data.product_id>0){
          console.log("当前行数据的商品id")
          console.log(data.product_id)
          this.form1.good.productId = data.product_id;
          this.form1.good.image = data.image;
          this.form1.good.storeName = data.product_name;
        }
    },
    makePrizeSure(){
      this.dialogFormVisible = false;
      console.log("打印选中的商品")
      console.log(this.form1.good)
      
      for(let i = 0;i<this.form.tableData.length;i++){
        if(this.form.tableData[i].id==this.setform.id){
            if(this.setform.type==0){//积分
                this.form.tableData[i].integral = this.setform.integral;
                this.form.tableData[i].product_id = 0;
                this.form.tableData[i].product_name = '';
                this.form.tableData[i].image = '';
            }else{//商品
                if(this.form1.good.productType==0){
                    this.$notify.error({
                      title: '错误',
                      message: '实物商品不可作为抽奖奖品'
                    });
                }else{
                  this.form.tableData[i].product_id = this.form1.good.productId;
                  this.form.tableData[i].product_name = this.form1.good.storeName;
                  this.form.tableData[i].image = this.form1.good.image;
                }
            }
            this.form.tableData[i].type = this.setform.type;
            this.form.tableData[i].number = this.setform.number;
            this.form.tableData[i].weight = this.setform.weight;
        }
      }
      this.form1.good={};
    }
  }
}
</script>

<style scoped>

</style>
